<template>
    <div>
        <ul class="mui-table-view">

            <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
                <router-link :to="'/home/newsinfo/' + item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.image">
                    <div class="mui-media-body">
                        <h1> {{item.title}} </h1>
                        <p class='mui-ellipsis'>
                            <span>{{item.subtitle}}{{new Date() | FFDateFormatter}}</span>
                            <span>点击：2</span>
                        </p>
                    </div>
                </router-link>
            </li>

        </ul>
    </div>

</template>

<script>
    import {Toast} from "mint-ui"
    export default  {
        data:function () {
            return {
                newslist:null
            }
        },
        created(){
          this.getDataList();
        },
        methods:{
            getDataList(){
                this.$http.get('http://rap2api.taobao.org/app/mock/149003/home/newslist')
                    .then((result)=>{
                        var data = result.body;
                        if (parseInt(data["status"]) === 200) {
                            this.newslist = data["list"]
                        } else {
                           Toast("请求失败")
                        }
                    })
            }
        },
    }

</script>

<style scoped>
    .mui-media-body h1{
        font-size: 14px;
    }
    .mui-ellipsis {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }
</style>